<template>
        <el-form :model="form" status-icon :rules="rules" ref="form" class="loginContainer">
            <h3 class="loginTitle">找回密码</h3>
            <el-form-item label="用户名" label-width="80px" prop="username">
                <el-input type="input" v-model="form.username" autocomplete="off" placeholder="请输入账号">
                </el-input>
            </el-form-item>
            <el-form-item label="邮箱" label-width="80px" prop="email">
                <el-input v-model="form.password" autocomplete="off" placeholder="请输入邮箱">
                </el-input>
            </el-form-item>
            <el-form-item label="验证码" label-width="80px" prop="code">
                <el-input type="password" v-model="form.password" autocomplete="off" placeholder="请输入验证码" style="width:158px">
                </el-input>
                <el-button @click="getCode" :disabled="!show">
                    <span v-show="show">发送验证码</span>
                    <span v-show="!show">{{form.code}}</span>
                </el-button>
            </el-form-item>
            <el-form-item label="新密码" label-width="80px" prop="password">
                <el-input type="password" v-model="form.password" autocomplete="off" placeholder="请输入新密码">
                </el-input>
            </el-form-item>
            <el-form-item label="确认密码" label-width="80px" prop="password">
                <el-input type="password" v-model="form.password" autocomplete="off" placeholder="请再次确认密码">
                </el-input>
            </el-form-item>
            <el-form-item class="loginSubmit">
                <el-button type="primary" @click="sureFind()" class="loginSubmit" style="margin-left:15px;width:320px">确定</el-button>
                <!-- <el-button type="primary" @click="login" style="margin-left:15px" class="loginSubmit">登录</el-button> -->
            </el-form-item>
            <router-link to="/Login">
                <el-link class="email">返回登录</el-link>
            </router-link>
            <!-- <span class="email">/</span>
            <router-link to="/emailLogin">
                <el-link class="email">邮箱登录</el-link>
            </router-link> -->
            
        </el-form>
</template>

<script>
// import cookie from '../cookie/index'
import store from '../store/index'
import jwtDecode from 'jwt-decode' //解析token
var Time = 60
export default({
    name:'login',
    data() {
        return {
            show:true,
            // count:'',
            form:{
                username:'',
                email:'',
                password:'',
                newPassword:'',
                code:''
            },
            rules:{
                username:[
                    { required:true, message:"请输入用户名",trigger:"blur" },
                    {
                        min:6,
                        max:18,
                        message:'用户名应6~18位的字母或数字',
                        trigger:"blur"
                    }
                ],
                email:[
                    {required:true, message:"请输入邮箱",trigger:"blur"},
                ],
                code:[
                    {required:true, message:"请输入验证码",trigger:"blur"},
                ],
                password:[
                    { required:true, message:"请输入密码",trigger:"blur" }
                ],
                newPassword:[
                    { required:true, message:"请再次输入密码",trigger:"blur" }
                ]
            }
        }
    },
    methods: {
        //确认找回密码
        sureFind(){
            if(this.form.username === ''||
                this.form.email === ''||
                this.form.code === ''||
                this.form.password === ''||
                this.form.email === ''||
                this.form.newPassword === ''
            ){
                this.$message({
                    type:'warning',
                    message:'请完整输入信息'
                })
            }else if(this.form.password != this.newPassword){
                this.$message({
                    type:'warning',
                    message:'两次密码不一致'
                })
            }else{
                this.$http({
                    url:'/shops/login_and_register/basic/retrievePassword',
                    method:'PUT',
                    params:{
                        userAccount:this.form.username,
                        enail:this.form.email,
                        code:this.form.code,
                        userPassword:this.form.newPassword
                    }
                }).then(data=> {
                    console.log(data);
                    if(data.data.code === 200){
                        this.$message({
                            type:'success',
                            message:'重置密码成功'
                        })
                    }else{
                        this.$message({
                            type:'success',
                            message:data.data.message
                        })
                    }
                })
            }
        },
        //发送验证码
        getCode(){
            if(this.form.email === ''){
                this.$message({
                    type:'warning',
                    message:'请先输入邮箱！'
                })
            }else if(this.form.email.search(/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.(?:com|cn)$/) != -1){
             //正则判断邮箱格式
             if(!this.timer){//倒计时
                    this.form.count = Time
                    this.show = false
                    this.timer = setInterval(() => {//发送验证码之后就倒数
                        if(this.form.count > 0 && this.form.count <= Time){
                            this.form.count--
                        }else{
                            this.show = true
                            clearInterval(this.timer)//关闭定时器
                            this.timer = null
                        }
                    }, 1000)
                }
                this.$http({
                    url:'/shops/login_and_register/email/sendMailCode',
                    method:'POST',
                    params:{
                        to:this.form.email
                    },
                }).then(data=> {
                    console.log(data);
                    if(data.data.code === 200){
                        this.$message({
                            type:'success',
                            message:'已发送验证码，请注意查收'
                        })
                    }else{
                        this.$message({
                            type:'error',
                            message:'请求超时，请检查网络设置'
                        })
                    }
                }).catch(err => {
                    console.log(err);
                })
            }else{
                this.$message({
                    type:'warning',
                    message:'邮箱格式错误'
                })
            }
        }
    },
    mounted() {
        
    },
})
</script>

<style scoped>
.loginContainer{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 150px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background-color: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
.loginTitle{
    margin: 0px auto 30px auto;
    text-align: center;
    color: #505458;
}
.loginSubmit{
    margin: 10px auto 0px auto;
    /* margin: 0 auto; */
    /* margin: 0; */
    text-align: center;
}
.email{
    font-size: 12px;
}
</style>